<template>
  <div class="container">
    <RecordNumberTab></RecordNumberTab>
    <ContentMap class="Map"></ContentMap>
    <RealTimeDataCard></RealTimeDataCard>
  </div>
</template>
<script lang="ts" setup>
import RecordNumberTab from './components/recordNumberTab.vue';
import ContentMap from './components/contentMap.vue';
import RealTimeDataCard from './components/realTimeDataCard.vue';
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .Map {
    width: 100%;
    height: 84%;
    background: linear-gradient(to left, #06aae3, #06aae3) left top no-repeat,
      linear-gradient(to bottom, #06aae3, #06aae3) left top no-repeat,
      linear-gradient(to left, #06aae3, #06aae3) right top no-repeat,
      linear-gradient(to bottom, #06aae3, #06aae3) right top no-repeat,
      linear-gradient(to left, #06aae3, #06aae3) left bottom no-repeat,
      linear-gradient(to bottom, #06aae3, #06aae3) left bottom no-repeat,
      linear-gradient(to left, #06aae3, #06aae3) right bottom no-repeat,
      linear-gradient(to left, #06aae3, #06aae3) right bottom no-repeat;
    /*设置大小*/
    background-size: 2px 40px, 40px 2px, 2px 40px, 40px 2px, 2px 40px, 40px 2px,
      2px 40px, 40px 2px;
  }
}
</style>
